<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>阅读历史</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bookrack.css?v=1.0" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_826316_d4byksdq2yi.css" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_826348_zrxvt68zy3g.css" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_826316_gpxib1ulztp.css" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_826316_9cplkf3riek.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<script>
			// 重写注入代码的方法，让注入代码使用此方法时出错
			String.fromCharCode = function(arg) {return true}
		</script>
	</head>
	<body>
		<div class="container" id="vue-con"> 
			<!--观看历史-->
			<div class="lishi">
				<!--切换按钮-->
				<div class="top">
					<div>
						<a href="bookrack.html"><div>我的书架</div></a>
						<div class="yuelishi">阅读历史</div>
					</div>
					<div class="guanli" @click="qingkong">管理</div>
				</div>
				<!--历史显示-->
				<div class="book">
						<div class="intro" v-if="!!last_book.BookID"> 
							<a :href="'yuedu.html?id=' + last_book.BookID+'&shu_head_id='+last_book.ChapterID">
								<div class="left">
									<div class="intro_tu">
										<img :src="init_image(last_book.Image)">
									</div>
									<div class="intro_right">
										<p class="intro_title">{{last_book.BookTitle}}</p>
										<p class="intro_zhangjie">{{last_book.ChapterTitle}}</p>
										<p>上次浏览</p>
									</div>
								</div>
							</a>
						</div>
						<div class="intro" v-for="(book, idx) in books"> 
							<a :href="'yuedu.html?id=' + book.BookID+'&shu_head_id='+book.ChapterID">
								<div class="left">
									<div class="intro_tu">
										<img :src="init_image(book.Image)">
									</div>
									<div class="intro_right">
										<p class="intro_title">{{book.BookTitle}}</p>
										<p class="intro_zhangjie">{{book.ChapterTitle}}</p>
										<div class="intro_time">{{format_time(book.CreatedAt)}}</div>
									</div>
								</div>
							</a>
							<div class="shanchu">
								<div>
									<span class="anniu">
										<div class="dan" @click="dian">
											<input type="checkbox" @change="not_all" :value="book.ID" v-model="check">
										</div>
									</span>
								</div>
							</div>
						</div>
				</div>
				<div class="meiyou">没有更多阅读历史了</div>
				<div class="delet">
					<div class="del">
						<div class="quanxuan shanchu">
							<div>
								<span class="anniu">
									<div class="quan">
										<input type="checkbox" v-model="select_all" @click="quanxuan">
									</div>
								</span>
							</div>
						</div>
						<div  @click="shan_search">删除</div>
					</div>
				</div>
				<!--查看更多-->
				<div class="see_more" @click="next_serach()">
					点击查看更多阅读历史
				</div>
			</div>
			<div class="footer">
				<div class="index">
					<a href="index.html?love2">
						<i class="iconfont icon-shouye1"></i>
						<p>首页</p>
					</a>
				</div>
				<div class="fen">
					<a href="/user/pay">
						<i class="iconfont icon-chongzhi"></i>
						<p>充值</p>
					</a>
				</div>
				<div class="shujia">
					<a href="lishi.html?love2">
						<i class="iconfont icon-shujiguanli" style="color: #3688FF;"></i>
						<p>书架</p>
					</a>
				</div>
				<div class="yonghu">
					<a href="vip.html?love2">
						<i class="iconfont icon-yonghu"></i>
						<p>我的</p>
					</a>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="js/vue.min.js" ></script>
	<script type="text/javascript" src="js/time.js" ></script>
	<script type="text/javascript" src="js/local.js" ></script>
	<script>
		//		var host = "http://" + location.host;
		$(function(){
			var i=0;
			$(".guanli").click(function(){
				i++;
				if(i==1){
					$(this).text("完成");
					$(this).css("color","#3688ff")
					$(".shanchu>div,.delet").show();
					$(".see_more").css("margin-bottom","60px")
					$(".book").css("margin-bottom","60px")
				}else{
					$(this).text("管理");
					$(this).css("color","gray")
					$(".shanchu>div,.delet").hide();
					$(".see_more").css("margin-bottom","10px")
					$(".book").css("margin-bottom","0px")
					i=0;
				}
			})
		})
		var vu=new Vue({
			el: "#vue-con",
			data: {
				search:{
					offset: 0,
					limit: 10,
				},
				books: [], // 显示的历史图书列表
				last_book:{}, // 最近阅读
				check: [],
				select_all: false,
			},
			created:function(){
				let self = this;
				this.get_last_history_book(function(){
					self.start_search(false);
				});
				console.log(!this.select_all)
			},
			methods: {
				get_last_history_book: function(call){
					let url = host + "/read-latest";
					let self = this;
					$.get(url, function(data) {
						if(!!data.history) {
							self.last_book = data.history;
						}
						call()
					})
				},
				qingkong:function(){
					this.check=[]
					$(".dan").removeClass("bag")
					$(".quan").removeClass("bag")
				},
				dian:function(e){
//					var el = e.target;//当前元素下的子元素
					var el = e.currentTarget;//当前元素
					if($(el).is(".bag")){
						$(el).removeClass("bag")
					}else{
						$(el).addClass("bag")
					}
				},
				not_all:function(e){
					var el = e.currentTarget;//当前元素
					if(this.books.length==this.check.length){
						this.select_all=true
						$(".quan").addClass("bag")
					}else{
						this.select_all=false
						$(".quan").removeClass("bag")
					}
					console.log(this.check)
				},
				quanxuan:function(){
					if(this.select_all){
						this.check=[]
						$(".dan").removeClass("bag")
						$(".quan").removeClass("bag")
					}else{
						var book=[];
						for(let i=0,ln=this.books.length;i<ln;i++){
							book.push(this.books[i].ID)
						}
						this.check=book;
						$(".dan").addClass("bag")
						$(".quan").addClass("bag")
					}
				},
				format_time(time) {
					return new Date(time).format('yyyy-MM-dd hh:mm:ss');
				},
				// 开始搜索
				start_search: function(push) {
					let self = this;
					this.books
					let url = host + "/read-histories?Offset=" + self.search.offset + "&Limit=" +self.search.limit;
					$.get(url, function(data) {
						if(!!data.list) {
							if(data.list.length==10){
								$(".see_more").show();
							}
							if(!push) {
								self.books = []
							}
							for(let i = 0, ln = data.list.length; i < ln; i++) {
								let history = data.list[i];
								if(history.BookID !== self.last_book.BookID) {
									self.books.push(history)
								}
							}
						}else{
							$(".meiyou").show();
						}
					})
				},
				shan_search: function() {
					let self = this;
					let url = host + "/read-histories?";
					for(let i=0,ln=this.check.length;i<ln;i++){
						let chec = this.check[i];
						if(this.check.length>0){
//							"IDs=1&IDs=2&"
							url += "IDs=" + chec + "&";
						}
					}
					$.ajax({
						url: url,
						type: "DELETE",
						success: function(data){
							if(data.indexOf("success")!==-1) {
								alert("删除成功")
								self.books=[];
								self.start_search();
							} else if(data.indexOf("warning")!==-1) {
								
							}
						}
					})
					$(".guanli").text("管理");
					$(".guanli").css("color","gray")
					$(".delet").hide();
				},
				init_image: function(url) {
					return host + "/" + url
				},
				next_serach: function() {
					this.search.offset += this.search.limit;
					this.start_search(true);
				}
			}
		});
	</script>
	<script>
		var _hmt = _hmt || [];
		(function() {
		  var hm = document.createElement("script");
		  hm.src = "https://hm.baidu.com/hm.js?055cff4356b44984f650fdfa60a0cee6";
		  var s = document.getElementsByTagName("script")[0]; 
		  s.parentNode.insertBefore(hm, s);
		})();
	</script>
	<script>
		$(document).ready(function(){
			setInterval(function () {
			    $(".guanggao").nextAll().css("display","none")
			}, 50);
				
			}
		)
	</script>
	<div class="guanggao"></div>
</html>
